<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>购买节点</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/number-input.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/pages/buynodes.css" />
  </head>
  <body class="pear-container">
    <div class="layui-tab" lay-filter="buynodes-tabs" style="margin-top:0">
      <div class="layui-tab-content" id="switch-window-tab" style="padding: 0;">
        <!-- 展示列表页面 -->
        <div class="layui-tab-item layui-show">
          <div class="layui-card">
            <div class="layui-card-body">
              <!-- 温馨提示 -->
              <p class="bn-tips">
                <strong>提示：</strong>
                ①：本平台所售IP，仅支持游戏加速、合法合规业务，禁止赌博、博彩、虚拟币、色情、违法违规相关项目，若有违法用途，本站会提交网监部门，并不承担任何法律责任，使用本产品即代表您同意本协议！
                ②：禁止长时间占用带宽、视频、音乐、直播、超高并发、违法违规业务查到删除不退。
                注：【本区大部分都会显示住宅类型，个别网站识别是机房，无需理会，介意可自由更换】
              </p>
              <!-- Search -->
              <form class="layui-form" onsubmit="return false;">
                <div class="layui-form-item">
                  <div
                    class="layui-input-inline flex align-center"
                    style="width: 100%; gap: 10px"
                  >
                    <input
                      type="text"
                      autocomplete="off"
                      name="keywords"
                      class="layui-input"
                      placeholder="请输入要搜索的项目"
                      style="max-width: 230px"
                    />
                    <button
                      type="button"
                      class="pear-btn pear-btn-md pear-btn-primary"
                      id="search-btn"
                    >
                      <i class="layui-icon layui-icon-search"></i>查询
                    </button>
                  </div>
                </div>
              </form>
              <hr />
              <!-- Game List. -->
              <div id="tab-gamebox"></div>
              <!-- end tab-item -->
            </div>
          </div>
        </div>

        <!-- 查询结果页面 -->
        <div class="layui-tab-item">
          <!-- 游戏头部选择 -->
          <div class="layui-card" style="margin-bottom: 5px;">
            <div class="layui-card-body" style="padding: 4px 10px;line-height: 0;">
              <!-- title -->
              <div class="gameinfo_title">
                <strong></strong>
                <span id="gameinfo-close">
                  <i class="layui-icon layui-icon-close"></i>
                </span>
                <i>
                  当前共有
                  <span class="gameinfo_filter_count">2</span>
                  项筛选条件，请根据需求选择
                </i>
              </div>

              <!-- filter -->
              <form class="layui-form gameinfo_filter" action=""  style="margin-top:0">
                <div class="layui-form-item" style="margin-bottom: 0">
                  <!-- <div class="layui-inline">
                    <div class="layui-input-inline">
                      <div name="ip_segment" id="ip_segment" value=""></div>
                    </div>
                  </div> -->
                  <div class="layui-inline">
                    <div class="layui-input-inline layui-input-inline-addgent">
                      <div id="operator_id_btns" class="pear-btn-group">
                        <!-- <button class="pear-btn " round> Button-One</button>
                        <button class="pear-btn pear-btn-primary" round> Button-Two</button>
                        <button class="pear-btn " round> Button-Three</button> -->
                      </div>
                      <!-- <div name="operator_id" id="operator_id" value=""></div> -->
                    </div>
                  </div>
                  <div class="layui-inline">
                    <div class="layui-input-inline">
                      <div name="open" id="open" value=""></div>
                    </div>
                  </div>
                  <!-- <div class="layui-inline gameinfo_filter_tips">
                    <div>20-30M</div>
                  </div> -->
                </div>
              </form>
<!--              <hr />-->
              <!-- 城市列表 -->
              <div class="gameinfo_citys" style="gap: 2px;"></div>
            </div>
          </div>

          <!-- 筛选后可被选择的节点 -->
          <div class="layui-card">
            <div class="layui-card-body" style="padding: 5px 10px;">
              <ul class="nodes-wrapper" style="column-gap: 2px;row-gap: 2px;"></ul>
            </div>
          </div>

          <!-- 悬浮结算框架 -->
          <div class="layui-card fixedbox-buy-wrapper mini">
            <div class="layui-card-body" style="line-height: 0;">
              <form
                class="layui-form"
                lay-filter="fixed-form"
                onsubmit="return false;"
              >
                <div class="layui-form-item">
                  <label class="layui-form-label">时长</label>
                  <div class="layui-input-block">
                    <div class="bn-times"></div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">自定义账户</label>
                    <!-- Auto Rebuild. -->
                    <div class="layui-input-block" id="custom-accounts"></div>
                  </div>
                </div>
                <!-- 行内样式、账号密码 -->
                <!-- 只有自定义账号可以展示 -->
                <div class="layui-form-item" id="inline-accounts" style="display: none;">
                  <div class="layui-inline">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="account"
                        id="account"
                        lay-verify="required"
                        placeholder="请输入账号"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block" style="max-width: 300px">
                      <input
                        type="text"
                        name="pass"
                        id="pass"
                        autocomplete="off"
                        class="layui-input"
                        placeholder="请输入密码"
                      />
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">自动输入</label>
                    <div class="layui-input-block">
                      <input
                        class="layui-input number-input-value"
                        type="number"
                        style="max-width: 180px"
                        min="0"
                        placeholder="节点数量"
                      />
                    </div>
                  </div>
                  <div class="layui-inline auto-input-second">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                      <button
                        class="pear-btn pear-btn-sm pear-btn-primary"
                        id="autoinput-confirm"
                      >
                        <i class="layui-icon layui-icon-ok"></i>
                        确认
                      </button>
                      <button
                        class="pear-btn pear-btn-sm"
                        id="autoinput-cancel"
                      >
                        <i class="layui-icon layui-icon-close"></i>
                        清空
                      </button>
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-form-label">分组</div>
                  <div class="layui-input-block">
                    <div class="layui-input-inline" style="max-width: 300px">
                      <input
                        type="number"
                        name="group_name"
                        value="0"
                        min="0"
                        lay-verify="required"
                        placeholder="请填写分组名称"
                        autocomplete="off"
                        class="layui-input layui-input-sm"
                        style="max-width: 210px"
                      />
                    </div>
                    <div class="layui-input-inline" style="max-width: 300px">
                      <input
                        type="text"
                        name="remark"
                        lay-verify="required"
                        placeholder="请填写订单备注"
                        autocomplete="off"
                        class="layui-input layui-input-sm"
                        style="max-width: 210px"
                      />
                    </div>
                  </div>
                </div>

                <div class="layui-form-item custom-port align-center justify-between">
                  <div class="layui-inline">
                    <label class="layui-form-label">自选端口</label>
                    <div class="layui-input-block">
                      <!-- 自选端口 -->
                      <div class="layui-input-inline">
                        <div name="ports" id="port" value=""></div>
                      </div>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <div class="layui-input-block">
                      <div
                        class="layui-input-inline layui-input-inline--autow flex align-center bn-submit-box">
                        <div>
                          <i
                            class="layui-icon layui-icon-senior text-color-blue"
                          ></i
                          >已选地区<span
                            class="point-score text-color-blue"
                            id="sel-area-count"
                            >0</span
                          >台
                        </div>
                        <div>
                          <i
                            class="layui-icon layui-icon-website text-color-blue"
                          ></i
                          >已选总IP<span
                            class="point-score text-color-blue"
                            id="sel-ip-count"
                            >0</span
                          >台
                        </div>
                        <div>
                          <i
                            class="layui-icon layui-icon-cellphone text-color-blue"
                          ></i
                          >消耗金币<span
                            class="point-score text-color-blue"
                            id="sel-score-count"
                            >0</span
                          >
                        </div>
                        <button
                          class="pear-btn pear-btn-sm pear-btn-primary"
                          id="confirm-order"
                        >
                          确认订单
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- gaps -->
    <div id="gaps" style="height: 300px; display: none"></div>

    <!-- 订单确认 -->
    <div class="order-confirm-wrapper" style="display: none">
      <table id="confirm-order-table" lay-filter="confirm-order-table"></table>
    </div>

    <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="/app/admin/admin/js/common.js"></script>
    <script src="/app/admin/admin/js/buynodes.js"></script>
    <!-- <script src="/app/admin/admin/js/number-input.js"></script> -->

    <script>
      console.log(
        '%c --- href >>>',
        'background: blue; color: #fff',
        location.href
      )

      const commonRender = CommonRenders()
      const commonApis = CommonApis()
      const gameDetail = GameDetail()

      // 发送消息给子级
      const sendMessage = (method, data, isSearch = false) => {
        const $ = layui.$
        // 获取当前激活的 iframe 实例 发送消息
        let childrenWindows = $(
          '#tab-gamebox .layui-tab-content .layui-show.layui-tab-item iframe'
        )[0].contentWindow

        childrenWindows.postMessage(
          {
            method,
            data,
            from: 'buynodes',
          },
          '*'
        )
      }

      // 表格渲染
      layui.use(['table', 'form', 'util', 'tab', 'xmSelect'], function () {
        let form = layui.form
        let $ = layui.$
        let util = layui.util
        let element = layui.element

        commonApis.getIndexInfo((data) => gameDetail.setIndexInfo(data)) // init fetch.

        // 接收子级传递的消息
        window.addEventListener('message', (event) => {
          const data = event.data
          console.log('子级发送过来的消息:', data)
          if (data.method === 'click') {
            excuteSwitch()
            gameDetail.initialization(data)
          }
        })

        // NOTE: 渲染游戏 Tabs & Regarding its events.
        commonRender.renderStepOneTab()

        // Click the to close  Step2 winds.
        $(document).on('click', 'span#gameinfo-close', excuteSwitch)

        // 时长操作逻辑
        $('.bn-times').on(
          'click',
          'button:not([data-type="btn"])',
          function () {
            const $btns = $('.bn-times button:not([data-type="btn"])')
            const $btn = $(this)
            const primaryStr = 'pear-btn-primary'
            const isSel = $btn.hasClass(primaryStr)
            let score = $btn.attr('data-score')
            let type = $btn.attr('data-type')
            $.each($btns, (index, btn) => $(btn).removeClass(primaryStr))
            $btn[isSel ? 'removeClass' : 'addClass'](primaryStr)
            updateShowTips($btn, gameDetail.selnodes)
            gameDetail.setFormData({ duration: type })
          }
        )

        // 自动输入 - 确定
        $('#autoinput-confirm').on('click', function () {
          gameDetail.autoSelect()
          commonRender.reRenderService()
          updateShowTips(undefined, gameDetail.selnodes)
        })
        $('#autoinput-cancel').on('click', function () {
          $('input.number-input-value').val('')
          gameDetail.cleanSelect()
          checkCountToSel({})
          commonRender.reRenderService(true)
        })

        // 监听服务 input change
        $('.nodes-wrapper').on(
          'change',
          'input[type="number"]',
          function (data) {
            const id = $(this).parents('li.service').attr('data-id')
            const val = Number($(this).val())
            if (isNaN(val) || val <= 0) {
              layer.msg('数据格式错误,请重新输入')
              $(this).val('')
              gameDetail.removeSelNode(id)
              checkCountToSel({}) // clean show tips.
              commonRender.reRenderService(true)
              return
            }
            const item = gameDetail.nodes.find((node) => node.id == id)
            gameDetail.setSelNode({
              ...item,
              number: val,
            })
            updateShowTips(undefined, gameDetail.selnodes)
            commonRender.reRenderService()
          }
        )

        // 监听分组输入数字等
        $('input[name="group_name"]').on('change', function (data) {
          const val = Number($(this).val())
          if (isNaN(val) || val <= 0) {
            layer.msg('分组数据格式错误,请重新输入')
            $(this).val('')
            return
          }
        })

        // 筛选城市
        $('.gameinfo_citys').on('click', 'button', function () {
          const $btn = $($(this).context)
          const isSel = $btn.hasClass('pear-btn-primary')
          let id = $btn.attr('data-id')
          if (id === 'all') id = ''
          cleanCitysStatus(() => {
            $btn[isSel ? 'removeClass' : 'addClass']('pear-btn-primary')
            gameDetail.filterObject.area_id = isSel ? '' : id
            gameDetail.fetchService()
          })
        })

        // 自定义账号
        form.on('radio(account)', function (data) {
          // elem: input
          // othis:C.fn.init {0: div.layui-unselect.layui-form-radio.layui-form-radioed, length: 1}
          // value:"1"
          const isFirst = data.value === '1'
          $('#inline-accounts')[isFirst ? 'show' : 'hide']()
          $('.fixedbox-buy-wrapper')[isFirst ? 'addClass' : 'removeClass'](
            'mini'
          )
          let formData = {}
          formData.custom_type = data.value
          if (isFirst) {
            formData.account = ''
            formData.pass = ''
          }
          gameDetail.setFormData(formData)
        })

        // SearchItems 搜索项目 | only once
        $('#search-btn').on('click', function () {
          const keywords = $('input[name="keywords"]').val()
          if (!keywords) {
            layer.msg('请输入要搜索的项目')
            sendMessage('reload')
            return
          }
          $('#tab-gamebox .layui-tab-title .layui-this').attr('data-search', 1)
          sendMessage('search', keywords)
          const $searchbox = $(
            '#tab-gamebox .layui-tab-title li[data-search="1"]'
          )
          $searchbox.one('click', function () {
            // NOTE: Reset the current search term.
            $('input[name="keywords"]').val('')
            $searchbox.removeAttr('data-search')
            setTimeout(() => {
              sendMessage('reload')
            }, 250)
          })
        })

        // 确认订单
        $('#confirm-order').on('click', function () {
          // 选择服务
          if (!gameDetail.selnodes) {
            layer.msg('请选择节点')
            return
          }
          // NOTE: 判断账号是否填写
          const formdata = layui.form.val('fixed-form')
          if (formdata.custom_type == 1) {
            if (!formdata.account) {
              layer.msg('请输入账号')
              return
            }
            if (!formdata.pass) {
              layer.msg('请输入密码')
              return
            }
          }
          gameDetail.confirmOrder()
        })
      })
    </script>
  </body>
</html>
